<template>
  <div style="background:#f6f6f6;height: 100vh;width: 100vw;" >
    <van-row style="color: #fff;background: #f862a0;height: 1.2rem;justify-content: center;align-items: center;padding: 0 0.3rem;">
      <van-col :span="18" style="font-size: 0.4rem;font-weight: 600;">
        <van-icon name="arrow-left" style="margin-right: 0.3rem;" @click="back" />登录
      </van-col>
      <van-col :span="6" style="font-size: 0.35rem;text-align: right;">
        <span @click="switchLogin" v-show="pvSwitch">密码登录</span>
        <span @click="switchLogin" v-show="!pvSwitch">验证码登录</span>
      </van-col>
    </van-row>
    <van-row style="height: 3.4rem;justify-content: center;">
      <img src="../assets/img/bilibili-bg.jpg" alt="" style="height: 100%;">
    </van-row>
    <div>
      <van-field v-model="tel" type="tel" label="+86" clearable="true" placeholder="请输入手机号">
        <template #button>
          <span v-show="pvSwitch">
            <span style="color: #f862a0;" @click="getVerify" v-show="switchVerify">获取验证码</span>
            <span v-show="!switchVerify" style=""><van-count-down :time="time" format="ss s" @finish="finish" /></span>            
          </span>
        </template>
      </van-field>

      <van-field v-model="verify" type="tel" label="验证码" clearable="true" placeholder="请输入验证码" v-show="pvSwitch"></van-field>
      <van-field v-model="password" type="password" label="密码" clearable="true" placeholder="请输入密码" v-show="!pvSwitch"></van-field>
    </div>
    <van-row style="padding: 0.6rem;">
      <van-button block style="border-radius: 10rem;background: #f862a157;color: #fff;" :class="{ back :buttonClass}" v-show="pvSwitch" @click="login(verify)">验证登录</van-button>
      <van-button block style="border-radius: 10rem;background: #f862a157;color: #fff;" :class="{ back :buttonClass}" v-show="!pvSwitch" @click="login(password)">密码登录</van-button>
    </van-row>
    <van-row style="justify-content: center;">
      <span style="color:#2b83e7;border-bottom: 1px solid #2b83e7;font-size: 0.4rem;" @click="register">还没有账号？点击注册</span>
    </van-row>
  </div>
</template>
<style lang="less" scoped>
.van-field{
  border-top: 1px solid #eee;
}
.back{
  background: #f862a1 !important
}
.van-field__button{
  padding: 0px;
}
</style>

<script setup>
import axios from '../api/index.js'
import { computed,ref } from 'vue';
import { showFailToast,showSuccessToast } from 'vant'
import { useRouter } from 'vue-router';

const router = new useRouter()

let tel = ref('')
let verify  = ref('')
let password = ref('')
let buttonClass = computed(() =>{
  if(tel.value.length>0 &&(verify.value.length>0 || password.value.length>0)){
    return true
  }
  return false
})

const login = async (string) =>{
  if(pvSwitch.value){//验证码登录
    console.log('验证码登录');
    if(string.length>0){
      const res = await axios.post('/login',{type:'verify',value:string,account:tel.value})
      if(res.data.name){
        window.localStorage.setItem('token',res.data.token)
        window.localStorage.setItem('name',res.data.name)
        showSuccessToast(res.msg)
        router.push('./tabbar/my')
      }
      else{
        showFailToast(res.msg)
      }
    }
    else{
      showFailToast('请输入验证码');
    }
  }
  else{//密码登录
    if(string.length>0){
      const res = await axios.post('/login',{type:'password',value:string,account:tel.value})
      if(res.data.name){
        window.localStorage.setItem('token',res.data.token)
        window.localStorage.setItem('name',res.data.name)
        showSuccessToast(res.msg)
        router.push('./tabbar/my')
      }
      else{
        showFailToast(res.msg)
      }
    }
    else{
      showFailToast('请输入密码');
    }
  }
}

let switchVerify= ref(true)
let time = ref(60*1000)

const finish = () =>{
  switchVerify.value = true
}

const getVerify = () =>{
  // if(tel.value.length===11){
    showSuccessToast('发送成功')
    verify.value = '000000'
    switchVerify.value =false
    return
  // }
  // showFailToast('手机格式错误');
}

const pvSwitch = ref(false)
const switchLogin = () =>{
  pvSwitch.value = !pvSwitch.value
}

const back = () =>{
  router.push('./tabbar/my')
}
const register = () =>{
  router.push('./register')
}
</script>
